<form action="" method="post">
	<label for="gebruiker_email">email:</label>
	<input  id="gebruiker_email" name="gebruiker_email" value="" /><br />
	<label for="gebruiker_wachtwoord">wachtwoord:</label>
	<input  id="gebruiker_wachtwoord" name="gebruiker_wachtwoord" value="" /><br />
	<br />
	<label for="gebruiker_voornaam">voornaam:</label>
	<input  id="gebruiker_voornaam" name="gebruiker_voornaam" value="" /><br />
	<label for="gebruiker_achternaam">achternaam:</label>
	<input  id="gebruiker_achternaam" name="gebruiker_achternaam" value="" /><br />
	<br />
	<label for="gebruiker_geboortedatum">geboortedatum;</label>
	<input  id="gebruiker_geboortedatum" name="gebruiker_geboortedatum" value="" /><br />
	<br />
	<label for="provincie_id">provincie:</label>
	<select id="provincie_id" name="provincie_id">
{foreach from=$provincies item=item}
		<option value="{$item->provincie_id}">{$item->provincie_naam}</option>
{/foreach}
	</select><br />
	<label for="woonplaats_id">woonplaats:</label>
	<select id="woonplaats_id" name="woonplaats_id">
{foreach from=$woonplaatsen item=item}
		<option value="{$item->woonplaats_id}">{$item->woonplaats_naam}</option>
{/foreach}
	</select><br />
	<br />
	<label for="profielicoon_id">profielicoon:</label>
	<select id="profielicoon_id" name="profielicoon_id">
{foreach from=$profieliconen item=item}
		<option value="{$item->profielicoon_id}">
			{$item->profielicoon_naam}
		</option>
{/foreach}
	</select><br />
	<br />
	<input type="submit" />
</form>

<script type="text/javascript">
{literal}

function getProvincieRequestParams(self){
	return "provincie_id/" + self.value;
}

function updateWoonplaatsList(responseText){
	json = JSON.parse(responseText);
	woonplaatsList = document.getElementById("woonplaats_id");
	woonplaatsList.innerHTML = null;
	
	function createOption(id, value){
		var option = document.createElement("option");
		var text = document.createTextNode(value);
		
		option.setAttribute("value", id);
		option.appendChild(text);
		
		return option;
	}
	
	if(json.success){
		for(key in json.woonplaatsen){
			woonplaats = json.woonplaatsen[key];
			woonplaatsList.appendChild(createOption(woonplaats.woonplaats_id, woonplaats.woonplaats_naam));
		}
	}
}

function updateProfielicoon(icoon){
	
}

function getXmlHTTP(){
	if(window.XMLHttpRequest){	return new XMLHttpRequest();
	}else{						return new ActiveXObject("Microsoft.XMLHTTP");}
}

function addListener(list){
	if(list[1] == null){
		//Non AJAX onChange event:
		document.getElementById(list[0]).addEventListener('change', list[2], false);
	}else{
		//AJAX Request
		document.getElementById(list[0]).addEventListener('change', function(){
			xmlhttp = getXmlHTTP();
			xmlhttp.onreadystatechange = function(){
				if(xmlhttp.readyState == 4 && xmlhttp.status==200){
					list[2](xmlhttp.responseText);
				}
			}
			uri = list[1] + "/" + list[3](this);
			xmlhttp.open("get", uri, true);
			xmlhttp.send();
		}, false);
	}
}

(function test(){
	onchangeList = new Array(	new Array("provincie_id", 	"/default/woonplaats/listbyprovincie",		updateWoonplaatsList, getProvincieRequestParams),
	     						new Array("profielicoon_id", null,										updateProfielicoon));
	//alert(onchangeList);
	for(key in onchangeList){
		addListener(onchangeList[key]);
	}
})()
{/literal}
</script>